<template>
  <el-form-item v-if="field.show" :label="field.parameterName" :prop="field.symbol">
    <el-select
      v-if="field.dataType === 'enum' || field.options.length > 0"
      v-model="formData[field.symbol]"
      class="w100"
      @change="$emit('change')"
    >
      <el-option v-for="row in field.options" :key="row.value" :label="row.label" :value="row.value"></el-option>
    </el-select>
    <!-- <el-input-number
      v-else-if="field.dataType === 'integer'"
      v-model="formData[field.symbol]"
      :controls="false"
      :precision="0"
      :min="field.min"
      :max="field.max"
      class="w100"
      @blur="$emit('change')"
    ></el-input-number>
    <el-input-number
      v-else-if="field.dataType === 'float'"
      v-model="formData[field.symbol]"
      :controls="false"
      :precision="2"
      :min="field.min"
      :max="field.max"
      class="w100"
      @blur="$emit('change')"
    ></el-input-number> -->
    <el-input-number
      v-else-if="['integer', 'float'].includes(field.dataType)"
      v-model="formData[field.symbol]"
      :controls="false"
      class="w100"
      @blur="$emit('change')"
    ></el-input-number>
    <el-switch
      v-else-if="field.dataType === 'boolean'"
      v-model="formData[field.symbol]"
      @change="$emit('change')"
    ></el-switch>
  </el-form-item>
</template>

<script>
import fackClickOutSide from './fackClickOutSide'
export default {
  mixins: [fackClickOutSide],
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    field() {
      let tem = { ...this.item }
      let validValues = tem.validValues
      if (validValues && validValues.indexOf(',') !== -1) {
        tem.options = validValues.split(',').map((value) => {
          return { label: value, value: value }
        })
      } else {
        tem.options = []
      }
      // if (validValues && validValues.indexOf('~') !== -1) {
      //   let arr = validValues.split('~')
      //   tem.min = Number(arr[0])
      //   tem.max = Number(arr[1])
      // }
      return tem
    }
    // show() {
    //   if (this.item.dependencies) {
    //     let condition = this.item.dependencies
    //     // const arr = condition.split(/==|\s&&\s\(\s|\s\|\|\s\(\s|\s\|\|\s|\s&&\s/)
    //     // const arr = condition.split(/===|!==|==|!=|>=|>|<=|<|\s&&\s\(\s|\s\|\|\s\(\s|\s\|\|\s|\s&&\s/)
    //     const arr = condition.split(/===|!==|==|!=|>=|>|<=|<|&&\(|\|\|\(|\|\||&&/)
    //     if (arr[0] === '') arr.shift()
    //     for (let i = 0; i < arr.length; i++) {
    //       if (i % 2 === 0) {
    //         arr[i] = arr[i].replace(/!\(/, '')
    //         condition = condition.replace(RegExp(arr[i]), `"${this.formData[arr[i]] ?? ''}"`)
    //       }
    //     }
    //     condition = condition.replace(/(===|!==|==|!=|>=|>|<=|<)(\w+)/g, '$1"$2"')
    //     let result = eval(condition)
    //     if (!result) {
    //       this.setData()
    //     }
    //     return result
    //   }
    //   return true
    // }
  },
  methods: {
    setData() {
      this.formData[this.item.symbol] = ['boolean'].includes(this.item.dataType)
        ? this.item.defaultValue === 'false'
          ? false
          : Boolean(this.item.defaultValue)
        : this.item.defaultValue ?? undefined
    }
  }
}
</script>

<style lang="less" scoped>
.w100 {
  width: 100%;
}
/deep/.el-input-number .el-input {
  height: 33px;
  .el-input__inner {
    text-align: left;
  }
}
</style>
